<template>
  <u-popup :show="show" mode="center" round="32rpx" @close="show = false" :safeAreaInsetBottom="false">
    <view class="flex column align-center dialog">
      <view class="c333 font36">{{ title }}</view>
      <view class="dialog-body c666 font28 tc">
        <!-- 内容 -->
        <slot></slot>
      </view>
      <view class="dialog-foot flex align-center font32" v-if="showConfirm">
        <view class="dialog-foot-item c666" @click="$emit('cancel')">{{ cancelText }}</view>
        <view class="dialog-foot-item cfff" @click="$emit('confirm')">{{ confirmText }}</view>
      </view>
      <view class="dialog-foot flex align-center font32" v-else>
        <view class="dialog-foot-item no-confirm c1f5" @click="$emit('cancel')">{{ cancelText }}</view>
        <!-- <view class="dialog-foot-item cfff" @click="$emit('confirm')">{{ confirmText }}</view> -->
      </view>
    </view>
  </u-popup>
</template>

<script>
export default {
  props: {
    value: {
      type: Boolean,
      default: false,
    },
    title: {
      type: String,
      default: "标题",
    },

    cancelText: {
      type: String,
      default: "取消",
    },

    confirmText: {
      type: String,
      default: "确定",
    },

    showConfirm: {
      type: Boolean,
      default: true,
    },
  },

  model: {
    prop: "value",
    event: "update",
  },

  data() {
    return {};
  },

  computed: {
    show: {
      get() {
        return this.value;
      },

      set(val) {
        this.$emit("update", val);
      },
    },
  },
};
</script>

<style lang="scss" scoped>
.dialog {
  padding-top: 40rpx;
  width: 560rpx;
  overflow: hidden;
  border-radius: 32rpx;

  &-body {
    padding: 34rpx 76rpx;
    padding-bottom: 80rpx;

  }

  &-foot {
    width: 100%;

    &-item {
      height: 100rpx;
      line-height: 100rpx;
      text-align: center;
      flex: 1;

      &:last-child {
        background-color: $uni-color-primary;
      }
    }
  }

  .no-confirm {
    background-color: #F8F9FD !important;
    color: #1F64E5;
  }
}
</style>